<script setup lang="ts">
  import { onMounted, reactive, watch, ref } from 'vue'
  import { useRoute, useRouter, _RouteLocationBase, onBeforeRouteUpdate } from 'vue-router'
  import { useStore } from 'vuex'
  import { storeStateType } from '@/common/types/store'
  import { key } from '@/store/index'
  import type { ElScrollbar } from 'element-plus'

  const store = useStore(key)
  const route = useRoute();
  const router = useRouter();

  //=> 滚动到当前标签，后期调试
  const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
  const scrollLeftMax = () => {
    scrollbarRef.value!.setScrollLeft(99999)
  }

  //=> 变量声明
  const tagList: _RouteLocationBase[] = []
  const data = reactive({ tagList });

  const setTags = (route: _RouteLocationBase) => {
    if (
      !data.tagList.some(item => item.fullPath === route.fullPath) && route.fullPath !== '/'
    ) {
      data.tagList.push({...route})
      scrollLeftMax()
    }
    store.commit('setCurrentTags', data.tagList)
  }

  //=> 跳转指定路由
  const changeRouter = (index: number) => {
    router.push({ ...data.tagList[index] })
  }

  //=> 关闭标签快捷键
  const handleTags = (command: string) => {
    if (command === 'other') { // 关闭除当前标签外的全部页面
      const currentTag = data.tagList.filter(item => {
        return item.path === route.fullPath
      })
      data.tagList = currentTag
      store.commit('setCurrentTags', data.tagList)
    } else { // 关闭全部页面
      data.tagList = []
      store.commit('setCurrentTags', [])
      router.push('/')
    }
  }

  //=> 关闭路由
  const closeRouter = (index: number) => {
    const closePath = data.tagList[index].fullPath
    if (closePath === route.fullPath) {
      if (index > 0) {
        router.push(data.tagList[index - 1].fullPath)
      } else {
        if (data.tagList.length > 1) {
          router.push(data.tagList[index + 1].fullPath)
        } else {
          router.push('/')
        }
      }
    }
    data.tagList.splice(index, 1)
    store.commit('setCurrentTags', data.tagList)
  }


  //=> 监听路由 fullPath 变化
  onBeforeRouteUpdate((route) => {
    setTags(route)
  })

  const _store = store as unknown as storeStateType;
  watch(() => _store.state.base.currentTags, (newValue) => {
    data.tagList = [...newValue]
  }, {
    deep: true
  })

  onMounted(() => {
    const _store = store as unknown as storeStateType;
    const currentTags = _store.state.base.currentTags;
    if (currentTags.length === 0) {
      setTags(route)
    } else {
      data.tagList = currentTags
    }
  })
</script>

<template>
  <div class="tag-container">
    <el-scrollbar ref="scrollbarRef" class="tag-area">
      <el-tag
        class="tag-item"
        :class="route.fullPath === tag.fullPath ? 'on' : ''"
        :key="tag.fullPath"
        type="info"
        v-for="(tag, index) in data.tagList"
        closable
        :disable-transitions="true"
        @click="changeRouter(index)"
        @close="closeRouter(index)"
      >
        {{ tag?.meta?.title || '' }}
      </el-tag>
    </el-scrollbar>
    <div class="tags-close-container">
      <el-dropdown placement="bottom" @command="handleTags">
        <el-button size="large" style="border:none">
          <el-icon><arrow-down-bold /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="other">关闭其他</el-dropdown-item>
            <el-dropdown-item command="all">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .tag-container {
    position: absolute;
    right: 0;
    top: 50px;
    left: 200px;
    z-index: 4;
    padding-right: 54px;
  }
  .tag-area {
    position: relative;
    display: flex;
    height: 40px;
    background: #fff;
    padding: 0 10px;
    white-space: nowrap;
  }
  .tag-item {
    margin-right: 10px;
    margin-top: 8px;
    color: #909399;
    font-size: 14px;
    user-select: none;
    &.on {
      background-color: $keyColor;
      border-color: $keyColor;
      color: #fff;
      :deep(.el-tag__close) {
        color: #fff;
        background: #3d88f2;
      }
      :deep(.el-tag__close:hover) {
        background: #96bcf0;
      }
    } 
  }
  .tags-close-container {
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    z-index: 2;
  }
</style>